<template>
	<div class="bom-list">
		<h1>列表界面</h1>
		<van-field v-model="dataList.length" readonly center label="数据条数:" center>
			{{dataList.length}}
			<template #button>
				<van-button icon="delete-o" size="small" type="primary" @click="deleteAllList()">一键清空</van-button>
			</template>
		</van-field>
		<!-- <van-button type="danger" @click="deleteAllList()">一键清空</van-button> -->


		<!-- <van-row gutter="20">
		  <van-col span="12">
			  <van-swipe-cell>
			    <van-card
			      num="2"
			      price="2.00"
			      desc="描述信息"
			      title="商品标题"
			      class="goods-card"
			      thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
			    />
			    <template #right>
			      <van-button square text="删除" type="danger" class="delete-button" />
			    </template>
			  </van-swipe-cell>
		  </van-col>
		  <van-col span="12">
			  <van-swipe-cell>
			    <van-card
			      num="2"
			      price="2.00"
			      desc="描述信息"
			      title="商品标题"
			      class="goods-card"
			      thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
			    />
			    <template #right>
			      <van-button square text="删除" type="danger" class="delete-button" />
			    </template>
			  </van-swipe-cell>
		  </van-col>
		</van-row> -->


		<!-- <van-swipe-cell v-for="(bomData,index) in dataList" :key="bomData.ID" style="margin-bottom: 10px;" :before-close="beforeClose">
			<van-cell-group border inset style="border: 2px solid #ccc;">
				<van-cell title="工号" :value="bomData.LACODSEQ" />
				<van-cell title="零件图号" :value="bomData.TY" />
				<van-cell title="零件名称" :value="bomData.REQUIRES" />
				<van-cell title="工序号" :value="bomData.JYBZ" />
				<van-cell title="单件号" :value="bomData.SYMBOL" />
			</van-cell-group>

			<template #right>
				<van-button square text="删除" type="danger" class="delete-button" />
			</template>
		</van-swipe-cell> -->

		<van-row>
			<van-col span="4">
				<van-cell value="工号" />
			</van-col>
			<van-col span="4">
				<van-cell value="零件图号" />
			</van-col>
			<van-col span="4">
				<van-cell value="零件名称" />
			</van-col>
			<van-col span="4">
				<van-cell value="工序号/工序名称" />
			</van-col>
			<van-col span="4">
				<van-cell value="单件号" />
			</van-col>
			<van-col span="4">
				<van-cell value="暂存时间" />
			</van-col>
		</van-row>

		<van-swipe-cell v-for="(bomData,index) in dataList" :key="bomData.timeId" style="margin-bottom: 10px;">
			<van-cell-group border inset style="border: 2px solid #ccc;" inset @click="toTable(bomData.timeId,index)">
				<!-- <van-cell title="工号" :value="bomData.LACODSEQ" />
				<van-cell title="零件图号" :value="bomData.TY" />
				<van-cell title="零件名称" :value="bomData.REQUIRES" />
				<van-cell title="工序号" :value="bomData.JYBZ" />
				<van-cell title="单件号" :value="bomData.SYMBOL" />
				<van-cell title="暂存起始时间" :value="bomData.timeId" /> -->

				<van-row>
					<van-col span="4">
						<van-cell :value="bomData.LACODSEQ" />
					</van-col>
					<van-col span="4">
						<van-cell :value="bomData.TY" />
					</van-col>
					<van-col span="4">
						<van-cell :value="bomData.REQUIRES" />
					</van-col>
					<van-col span="4">
						<van-cell :value="bomData.JYBZ" />
					</van-col>
					<van-col span="4">
						<van-cell :value="bomData.SYMBOL" />
					</van-col>
					<van-col span="4">
						<van-cell :value="bomData.timeId" />
					</van-col>
				</van-row>
			</van-cell-group>

			<!-- <van-cell title="单元格" value="内容3" /> -->
			<template #right>
				<van-button square text="删除" type="danger" class="delete-button"
					@click="delBtnClick(index,bomData.timeId)" />
			</template>
		</van-swipe-cell>

	
	
		<!--展示底部数据-->
		    <van-list
		        v-model="loading"
		        :finished="finished"
		        finished-text=""
		        @load="onLoad"
		    >
		      <van-cell v-for="item in list" :key="item" :title="item" :border="false" />
		    </van-list>

	</div>
</template>

<script>
	// import BomCard from '../components/BomCard.vue'
	// var bomList = JSON.parse(localStorage.getItem('bomList'));
	
	
	export default {
		name: "bomList",
		// components:[
		// 	BomCard
		// ],
		data() {
			return {
				list: [],
				loading: false,
				finished: false,
				
				dataList: []
				// dataList: [{
				// 		"timeId":"",//本次存储的唯一标识
				// 		"LACODSEQ": "燃25-5", //工号
				// 		"TY": "510-0717", //零件图号
				// 		"REQUIRES": "引熄弧板", //零件名称
				// 		"SYMBOL": "20", //单件号
				// 		"JYBZ": "P1102402" //工序号/工序名称
				// 	}]
			}
		},
		mounted() {
			var bomList = JSON.parse(localStorage.getItem('bomList'));
			this.dataList = bomList;
			if (bomList === null || bomList.length === 0) {
				this.$toast({
					message: '暂无数据！',
					duration: 1000
				});
			}
		},
		// watch:{
		// 	dataList:function(){

		// 	}
		// },
		methods: {
			onLoad() {
			      // 异步更新数据
			      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
			      // setTimeout(() => {
			      //   for (let i = 0; i < 10; i++) {
			      //     this.list.push(this.list.length + 1);
			      //   }
			      //
			      //   // 加载状态结束
			      //   this.loading = false;
			      //
			      //   // 数据全部加载完成
			      //   if (this.list.length >= this.dataList.length) {
			      //     this.finished = true;
			      //   }
			      // }, 1000);
			      this.list.push("提示：左滑可删除");
			      for (let i = 0; i < 2; i++) {
			        this.list.push("");
			      }
			      // 加载状态结束
			      this.loading = false;
			      // this.finished = true;
			      // 数据全部加载完成  this.dataList.length
			      if (this.list.length >= 2) {
			        this.finished = true;
			      }
			    },
				
			delBtnClick(index, timeId) {
				this.$dialog.confirm({
					message: '确定删除吗？',
				}).then(() => {
					this.dataList.splice(index, 1);
					var bomList = this.dataList;
					localStorage.setItem('bomList', JSON.stringify(bomList));
					localStorage.removeItem(timeId);
				});
			},
			deleteAllList() {
				this.$dialog.confirm({
						title: '删除提示！',
						message: '您确定要删除所有的暂存记录？',
					})
					.then(() => {
						// on confirm
						this.dataList.forEach(item => {
							localStorage.removeItem(item.timeId);
						})
						localStorage.removeItem('bomList');
						this.dataList = [];
					})
					.catch(() => {
						// on cancel
						return;
					});
			},
			toTable(timeId, index) {
				// console.log(`timeId:${timeId}`);
				// console.log(`index:${index}`);
				this.$router.push({
					name: 'table',
					params: {
						"timeId": timeId,
						"index": index
					}
				});
			},
		}
	}
</script>
<style scoped>
	.delete-button {
		height: 100%;
	}

	.card-content {
		width: auto;
		height: inherit;
		background-color: #49f05d;
	}
</style>
